import React from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { Button, Tabs, type TabsProps } from "antd";
import qs from 'query-string'
type Props = {};

const items: TabsProps["items"] = [
  {
    key: "/prod",
    label: "产品1",
  },
  {
    key: "/prod/p2",
    label: "产品2",
  },
];

export default function Product({}: Props) {
  let navigate = useNavigate(); //编程式导航Hook
  let location = useLocation()
  const onChange = (key: string) => {
    console.log(key);
    // 方法1：
    // navigate(key);
    // 方法2：编程式导航传参
    // navigate(`${key}?id=111&name=三丰`)
    // 方法2-1：使用query-string写出处理参数格式
    // let user = {
    //     id:112,
    //     name:'三丰'
    // }
    // let search = qs.stringify(user)
    // navigate(`${key}?${search}`)
    // 方法3: state参数  【推荐使用】
    let user = {
        id:112,
        name:'三丰'
    }
    navigate(key,{state:user})
  };
  const handleBack = ()=>{
    // 方法4：
    navigate(-1)
  }
  return (
    <div>
      产品主组件
      <Button type="primary" onClick={handleBack}>返回上一级路由</Button>
      <Tabs items={items} onChange={onChange} type="line" activeKey={location.pathname}/>
      {/* 呈现子路由组件 */}
      <Outlet />
    </div>
  );
}
